/**
* 左边菜单
*/
<template>
<div id="leftnav">
  <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#2F4050" text-color="rgba(255,255,255,0.75)" active-text-color="#fff" :unique-opened="true">
    <div v-for="menu in allmenu" :key="menu.menuid">
      <el-menu-item v-if="menu.menus === null" :index="menu.url" ><img class="icon" :src="menu.icon" alt=""> <span>{{menu.menuname}}</span> </el-menu-item>
      <el-submenu v-else :index="menu.url" >
        <template slot="title">
          <img class="icon" :src="menu.icon" alt="">
          <span>{{menu.menuname}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="chmenu in menu.menus" :index="chmenu.url" :key="chmenu.menuid">
            <i class="iconfont" :class="chmenu.icon"></i>
            <span>{{chmenu.menuname}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
  </el-menu>
</div>
</template>
<script>
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  beforeMount() {
    // 托运人
    let shipper = [
        {
          menuid: 10,
          icon: require('../assets/img/menu/icon10.png'),
          menuname: '首页',
          url: '/home',
          menus: null
        },{
          menuid: 20,
          icon: require('../assets/img/menu/icon20.png'),
          menuname: '企业认证',
          url: '/certified',
          menus: null
        },{
          menuid: 30,
          icon: require('../assets/img/menu/icon30.png'),
          menuname: '发布货源',
          url: '/sendgoods',
          menus: null
        },{
          menuid: 40,
          icon: require('../assets/img/menu/icon40.png'),
          menuname: '运输管理',
          url: '',
          menus: [
            {
              menuid: 41,
              icon: '',
              menuname: '订单管理',
              url: '/order'
            },{
              menuid: 42,
              icon: '',
              menuname: '运单管理',
              url: '/waybill'
            },{
              menuid: 43,
              icon: '',
              menuname: '订单台账',
              url: '/orderledger'
            },{
              menuid: 44,
              icon: '',
              menuname: '运单台账',
              url: '/waybillledger'
            }
          ]
        },{
          menuid: 50,
          icon: require('../assets/img/menu/icon50.png'),
          menuname: '财务管理',
          url: '1',
          menus: null
        },{
          menuid: 60,
          icon: require('../assets/img/menu/icon60.png'),
          menuname: '经纪人管理',
          url: '3',
          menus: null
        },{
          menuid: 70,
          icon: require('../assets/img/menu/icon70.png'),
          menuname: '合作伙伴',
          url: '2',
          menus: null
        },{
          menuid: 80,
          icon: require('../assets/img/menu/icon80.png'),
          menuname: '合同管理',
          url: '4',
          menus: null
        },{
          menuid: 90,
          icon: require('../assets/img/menu/icon90.png'),
          menuname: '油卡管理',
          url: '5',
          menus: null
        },{
          menuid: 100,
          icon: require('../assets/img/menu/icon100.png'),
          menuname: '钱包和流水',
          url: '6',
          menus: null
        },{
          menuid: 110,
          icon: require('../assets/img/menu/icon110.png'),
          menuname: '系统管理',
          url: '7',
          menus: [
            {
              menuid: 111,
              icon: '',
              menuname: '角色管理',
              url: '/setrole'
            },{
              menuid: 112,
              icon: '',
              menuname: '员工管理',
              url: '/setstaff'
            },{
              menuid: 113,
              icon: '',
              menuname: '设置密码',
              url: '/setpassword'
            },
          ]
        },
      ]
    // 承运人
    let carrier = [
        {
          menuid: 10,
          icon: require('../assets/img/menu/ticon10.png'),
          menuname: '首页',
          url: '/home',
          menus: null
        },{
          menuid: 20,
          icon: require('../assets/img/menu/ticon20.png'),
          menuname: '企业认证',
          url: '/certified',
          menus: null
        },{
          menuid: 30,
          icon: require('../assets/img/menu/ticon30.png'),
          menuname: '运输管理',
          url: '2',
          menus: [
            {
              menuid: 31,
              icon: '',
              menuname: '订单管理',
              url: '/order'
            },{
              menuid: 32,
              icon: '',
              menuname: '运单管理',
              url: '/waybill'
            },{
              menuid: 33,
              icon: '',
              menuname: '订单台账',
              url: '/orderledger'
            },{
              menuid: 34,
              icon: '',
              menuname: '运单台账',
              url: '/waybillledger'
            }
          ]
        },{
          menuid: 40,
          icon: require('../assets/img/menu/ticon40.png'),
          menuname: '财务管理',
          url: '1'
        },{
          menuid: 50,
          icon: require('../assets/img/menu/ticon50.png'),
          menuname: '车辆管理',
          url: '3',
          menus: [
            {
              menuid: 51,
              icon: '',
              menuname: '车俩认证',
              url: '/carupload'
            },{
              menuid: 52,
              icon: '',
              menuname: '车俩信息',
              url: '/carmanage'
            },
          ]
        },{
          menuid: 60,
          icon: require('../assets/img/menu/ticon60.png'),
          menuname: '司机管理',
          url: '4',
          menus: [
            {
              menuid: 61,
              icon: '',
              menuname: '司机认证',
              url: '/driverupload'
            },{
              menuid: 62,
              icon: '',
              menuname: '司机信息',
              url: '/drivermanage'
            },
          ]
        },{
          menuid: 70,
          icon: require('../assets/img/menu/ticon70.png'),
          menuname: '评价管理',
          url: ''
        },{
          menuid: 80,
          icon: require('../assets/img/menu/ticon80.png'),
          menuname: '系统管理',
          url: '5',
          menus: [
            {
              menuid: 81,
              icon: '',
              menuname: '角色管理',
              url: '/setrole'
            },{
              menuid: 82,
              icon: '',
              menuname: '员工管理',
              url: '/setstaff'
            },{
              menuid: 83,
              icon: '',
              menuname: '设置密码',
              url: '/setpassword'
            },
          ]
        },
      ]
    if (this.$store.state.USER == 1) {
      this.allmenu = shipper
    } else if (this.$store.state.USER == 2) {
      this.allmenu = carrier
    }
  }
}
</script>
<style lang='scss'>
#leftnav{
  height: 100%;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 340px;
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  .el-menu-item-group__title {
    padding: 0px;
  }
  // 只有一级导航
  .el-menu-item {
    padding-left: 30px !important;
     .icon {
      width: 16px;
    }
    span {
      margin-left: 26px;
    }
  }
  // 一级和二级
  .el-submenu__title {
    padding: 0 30px !important;
    .icon {
      width: 16px;
    }
    span {
      margin-left: 30px;
    }
  }
  .el-menu-item-group {
    background-color: red !important;
  }
  .el-menu-item-group>ul>li {
    padding-left: 45px !important;
    background-color: #293846 !important;
    border-left: 6px solid #52A1F1;
    box-sizing: border-box;
  }
}
</style>